<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('wallet.wdqb')" :leftIcon="true"></navbar>

		<!-- 未添加钱包状态 -->
		<view class="no-wallet" v-if="!hasWallet">
			<button class="add-wallet-btn" @click="addWallet">{{ t('wallet.tjqb') }}</button>

			<view class="recent-address">
				<view class="address-title">{{ t('wallet.jqtxdz') }}</view>
				<view class="no-address">{{ t('wallet.wu') }}</view>
			</view>
		</view>

		<!-- 已添加钱包状态 -->
		<view class="has-wallet" v-else>
			<view class="wallet-card">
				<view class="card-top">
					<text class="wallet-title">{{t('wallet.wdzqb')}}</text>
					<image class="wallet-icon" src="/static/icon/ccdd-icon.svg"></image>
				</view>

				<text class="wallet-address">TCNTdakbmgSZasagGy7iBtB3awRs9uJya6</text>
			</view>

			<view class="action-buttons">
				<button class="action-btn add-btn" @click="addWallet">{{ t('wallet.tj') }}</button>
				<button class="action-btn edit-btn" @click="editWallet">{{ t('wallet.bj') }}</button>
			</view>

			<view class="recent-address">
				<view class="address-title">{{ t('wallet.jqtxdz') }}</view>
				<view class="address-list">
					<text class="address-item" @click="copyAddress">TQLJUR7roiDyHQwCWHXKcjBp7zMNuwXw6i</text>
					<text class="address-item" @click="copyAddress">TKpaWU1ojmn8tMV82kgHbHwZpSodNqGDhE</text>
					<text class="address-item" @click="copyAddress">TCNTdakbmgSZasagGy7iBtB3awRs9uJya6</text>
					<text class="address-item" @click="copyAddress">TKpaWU1ojmn8tMV82kgHbHwZpSodNqGDhE</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useI18n
	} from 'vue-i18n';
	import {
		ref
	} from 'vue';
	const {
		t,
		locale
	} = useI18n();

	// 是否已添加钱包
	const hasWallet = ref(false); // 设置为false显示未添加钱包状态，设置为true显示已添加钱包状态

	// 添加钱包
	const addWallet = () => {
		// 这里添加钱包的逻辑
		hasWallet.value = true;
	};

	// 编辑钱包
	const editWallet = () => {
		// 这里编辑钱包的逻辑
		// uni.showToast({
		// 	title: t('wallet.bjz'),
		// 	icon: 'none'
		// });
		uni.navigateTo({
			url: "/pages/my/wallet/addWallet"
		})
	};

	// 复制地址
	const copyAddress = (e) => {
		const address = e.target.innerText || e.currentTarget.innerText;
		uni.setClipboardData({
			data: address,
			success: () => {
				uni.showToast({
					title: t('common.fzcg'),
					icon: 'none'
				});
			}
		});
	};
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		padding: 41.86rpx 90.70rpx;
		box-sizing: border-box;
	}

	/* 未添加钱包状态 */
	.no-wallet {
		display: flex;
		flex-direction: column;
		align-items: center;

		.add-wallet-btn {
			width: 100%;
			border-radius: 26.16rpx;
			background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 29.17%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
			font-size: 31.4rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			line-height: 97.68rpx;
			color: rgba(255, 255, 255, 1);
			margin-bottom: 22.68rpx;
		}
	}

	/* 已添加钱包状态 */
	.has-wallet {
		display: flex;
		flex-direction: column;

		.wallet-card {
			width: 598.29rpx;
			height: 380.25rpx;
			background: url(/static/image/my/wallet-bg.svg) no-repeat;
			border-radius: 27.91rpx;
			margin-bottom: 41.86rpx;
			position: relative;

			.card-top {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin: 41.86rpx;

				.wallet-title {
					font-size: 24.42rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 34.19rpx;
					color: rgba(255, 255, 255, 1);
				}

				.wallet-icon {
					width: 69.42rpx;
					height: 69.42rpx;
				}
			}



			.wallet-address {
				position: absolute;
				bottom: 94.2rpx;
				font-size: 24.42rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 35.36rpx;
				color: rgba(255, 255, 255, 1);
				margin-left: 41.86rpx;
			}
		}

		.action-buttons {
			margin-bottom: 78.5rpx;

			.action-btn {
				width: 570.38rpx;
				height: 97.68rpx;
				line-height: 97.68rpx;
				border-radius: 26.16rpx;
				font-size: 31.4rpx;
				font-weight: 600;
			}

			.add-btn {
				background: linear-gradient(90deg, rgba(12, 193, 155, 1) 0%, rgba(91, 220, 222, 1) 29.17%, rgba(5, 145, 198, 1) 65.97%, rgba(2, 120, 220, 1) 100%);
				color: #FFFFFF;
				margin-bottom: 13.96rpx;
			}

			.edit-btn {
				border: 1.74rpx solid rgba(102, 102, 102, 1);
				color: rgba(102, 102, 102, 1);
			}
		}
	}

	/* 近期提现地址 */
	.recent-address {
		width: 100%;

		.address-title {
			font-size: 27.91rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.42rpx;
			color: rgba(0, 0, 0, 1);
			margin-bottom: 36.64rpx;
		}

		.no-address {
			font-size: 20.93rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 30.32rpx;
			color: rgba(102, 102, 102, 1);
		}

		.address-list {
			display: flex;
			flex-direction: column;

			.address-item {
				font-size: 20.93rpx;
				color: rgba(102, 102, 102, 1);
				padding: 20.93rpx 0;
			}
		}
	}
</style>